<template>
	<view class="content">
		<u-sticky bgColor="#fff">
		    <u-tabs :list="tabList" lineColor="#FD9618" :activeStyle="{ color: '#FD9618' }" :itemStyle="{ width: '50%',height: '40px' }" @click="tabClick"></u-tabs>
		</u-sticky>
		<view class="mainBox">
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="list" v-for="(item,i) in list" :key="i">
					<view class="listTop row">
						<view class="time fill">{{$filters.formatDate(item.createTime)}}</view>
						<view class="type">电子收据</view>
					</view>
					<view class="listCen row">
						<view class="name fill">{{item.customerName}}</view>
						<view class="price"><text class="bold">{{item.amount}}</text>元</view>
					</view>
					<view class="listBtm row">
						<view class="status fill">已开票</view>
						<view class="look yellow" @click="viewInvoice(item.id)">查看收据</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
import { onPageScroll, onReachBottom } from "@dcloudio/uni-app"
import { receiptPage,receiptPdf } from '@/common/API/room'
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom)
const curTab = ref(0)
const tabList = reactive([{ name: '电子收据' },{ name: '电子发票' }])
const tabClick = (e:any) => {
	curTab.value = e.index;
	resetScroll()
}
const viewInvoice = async (id) => {
	switch (uni.getSystemInfoSync().platform){
		case 'android':
			openPdf(id)
			break;
		case 'ios':
			uni.navigateTo({
				url:`invoicePdf?id=${id}`
			})
			break;
		default:
			openPdf(id)
			break;
	}
}

const openPdf = async (id)=>{
	let url = await receiptPdf({
		id: id
	})
	uni.downloadFile({
		url: url,
		success: (res)=>{
			let filepath = res.tempFilePath;
			uni.openDocument({
				filePath: filepath,
				showMenu: true,
				success: function () {
					console.log('打开文档成功');
				}
			})
		}
	})
}

const list = ref<any>([])
const upCallback = async (mescroll)=>{
	if(uni.getStorageSync('userId')&&curTab.value==0){
		let data = {
			pageNum: mescroll.num,
			pageSize: mescroll.size
		}
		let res = await receiptPage(data)
		let curPageData = res.list;
		let curPageLen = curPageData.length;
		if(mescroll.num == 1) list.value = [];
		list.value = list.value.concat(curPageData);
		mescroll.endSuccess(curPageLen);
	}else{
		mescroll.endSuccess(0);
	}
}

const resetScroll = ()=>{
	list.value = [];
	downCallback()
}
</script>

<style lang="scss" scoped>
.content{
	::v-deep.u-sticky{
		border-bottom: 2rpx solid #E5E5E5;
		margin: 0 0 16rpx;
		.u-tabs__wrapper__nav__line{
			bottom: 0;
		}
	}
	.list{
		background: #fff;
		margin: 0 0 16rpx;
		padding: 38rpx 32rpx 40rpx;
		.listCen{
			.name{
				font-size: 30rpx;
			}
			.price{
				font-size: 24rpx;
				.bold{
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
		.listBtm{
			margin-top: 6rpx;
		}
	}
}
</style>
